<template>
	<div class="ratings" ref="ratings">
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<!--分数-->
					<h1 class="score">{{seller.score}}</h1>
					<p class="title">综合评分</p>
					<p class="rank">高于周边商家{{seller.rankRate}}%</p>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size="36" :score="seller.serviceScore" class="star"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">商品评分</span>
						<star :size="36" :score="seller.serviceScore" class="star"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wrapper">
						<span class="title">送达时间</span>
						<span class="deliverytime">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingselect :select-type="selectType" :only-content="onlyContent"
			              :ratings="ratings"></ratingselect>
			<!--具体评论-->
			<div class="rating-wrapper">
				<ul>
					<li v-for="rating in ratings" class="rating-item border-1px" v-show="needShow(rating.rateType,rating.text)">
						<div class="avatar">
							<img :src="rating.avatar" width="28" heigth="28">
						</div>
						<div class="content">
							<!--头像-->
							<h1 class="name">{{rating.username}}</h1>
							<!--评分-->
							<div class="star-wrapper">
								<star :size="24" :score="rating.score" class="star"></star>
								<span class="deliverytime" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
							</div>
							<!--评论内容-->
							<p class="text">{{rating.text}}</p>
							<!--推荐-->
							<div class="recommend" v-show="rating.recommend.length">
								<i :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></i>{{rating.text}}
								<span v-for="item in rating.recommend" class="item">{{item}}</span>
							</div>
							<!--时间-->
							<div class="time">{{rating.rateTime | datefmt}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
    import star from "components/star/star"
    import split from 'components/split/split';
    import ratingselect from 'components/ratingselect/ratingselect';
    import {datefmt} from 'common/js/date'
    import BScroll from 'better-scroll';

    const ALL = 2;//全部评价
    const POSITIVE = 0;//正向评价
    const NEGATIVE = 1;//负面评价
    const ERR_OK =0;
    
    export default {
        props: {
            seller: {
                type:Object
            }
        },
	    data() {
            return {
                ratings:[],
                //显示全部评价
                selectType:ALL,
                //显示有内容的评价
                onlyContent: true
            }
	    },
	    created() {
            this.$http.get('/api/ratings').then((response) => {
                response = response.body;
                if(response.errno === ERR_OK){
                    this.ratings = response.data;
                    this.$nextTick(()=>{
                        this.scroll = new BScroll(this.$refs.ratings,{
                            //支持点击事件
                            click:true
                        });
                    })
                }
            })
            this.$root.eventHub.$on('ratingtype.select', type => {
                this.selectType = type;
                this.$nextTick(()=>{
                    this.scroll.refresh();
                })
            });
            this.$root.eventHub.$on('content.toggle', onlyCont => {
                this.onlyContent = onlyCont;
                this.$nextTick(()=>{
                    this.scroll.refresh();
                })
            });
	    },
	    methods:{
            needShow(type,text) {
                //评论类型
                //text:是否显示有内容的评论
                if(this.onlyContent && !text){ //判断是否显示内容, 并没有内容
                    return false;
                }
                if(this.selectType === ALL){
                    return true;
                }else{
                    return type ===this.selectType;
                }
            }
	    },
	    components:{
            star,
            split,
            ratingselect
	    }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	
	.ratings
		position: absolute
		top: 174px
		left:0
		bottom: 0
		width: 100%
		overflow :hidden
		.overview
			display:flex
			padding:18px 0
			.overview-left
				flex:0 0 137px
				width:137px
				padding:6px 0
				text-align: center
				border-right :1px solid rgba(7,17,27,0.1)
				text-align: center
				@media only screen and (max-width: 320px)
					flex:0 0 120px
					width:120px
				.score
					line-height: 28px
					margin-bottom: 6px
					font-size: 24px
					color: rgb(255, 153, 0)
				.title
					line-height: 12px
					margin-bottom: 8px
					font-size: 12px
					color:rgb(7,17,27)
				.rank
					line-height: 10px
					font-size: 10px
					color:rgb(147,153,159)
			.overview-right
				flex:1
				padding:6px 0 6px 24px
				@media only screen and (max-width: 320px)
					padding-left:6px
				.score-wrapper
					margin-bottom: 8px
					font-size:0
					.title
						display: inline-block
						line-height: 18px
						vertical-align: top
						font-size: 12px
						color:rgb(7,17,27)
					.star
						display: inline-block
						margin:0 12px
						vertical-align: top
					.score
						display: inline-block
						line-height: 18px
						vertical-align: top
						font-size: 12px
						color: rgb(255, 153, 0)
				.delivery-wrapper
					font-size:0
					.title
						display: inline-block
						line-height: 18px
						vertical-align: top
						margin-right:12px
						font-size: 12px
						color:rgb(7,17,27)
					.deliverytime
						margin-left: 12px
						line-height: 18px
						font-size: 12px
						color:rgb(147,153,159)
						
		.rating-wrapper
			padding: 0 18px
			.rating-item
				display:flex
				padding: 18px 0
				border-1px(rgba(7,17,27,0.1))
				.avatar
					flex:0 0 28px
					width: 28px
					margin-right: 12px
					img
						border-radius :50%
				.content
					flex:1
					position: relative
					.name
						line-height: 12px
						font-size: 10px
						color:rgb(7,17,27)
						margin-bottom: 4px
					.star-wrapper
						margin-bottom: 6px
						font-size:0
						.star
							display: inline-block
							vertical-align: top
							margin-right: 6px
						.deliverytime
							display: inline-block
							vertical-align: top
							line-height: 12px
							font-size: 10px
							color:rgb(147,153,159)
					.text
						line-height: 18px
						margin-bottom: 8px
						font-size: 12px
						color: rgb(7, 17, 27)
					.recommend
						line-height: 16px
						font-size:0
						.icon-thumb_up,.item
							display: inline-block
							margin:0 8px 4px 0
							font-size: 9px
						.icon-thumb_up
							color:rgb(0,160,220)
						.item
							padding:0 6px
							border:1px solid rgba(7,17,27,0.1)
							border-radius :1px
							color:rgb(147,153,159)
							background: #ffffff
					.time
						position: absolute
						top: 0px
						right: 0px
						line-height: 12px
						font-size: 10px
						color:rgb(147,153,159)

</style>